<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hnstf | register</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">
    <!-- Ladda style -->
    <link href="css/plugins/ladda/ladda-themeless.min.css" rel="stylesheet">
    <!-- Sweet Alert -->
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>

<body class="gray-bg">
    <div class="text-center ">
        <div>
            <h2>河南省科技金融信息服务平台</h2>
        </div>
        <form role="form" class="form-horizontal" id="role_form_register" action="add">
            <div class="form-group">
                <label class="col-lg-3 control-label">*用户名：</label>
                <div class="col-lg-3">
                    <input type="text" id="userName" name="userName" class="form-control" placeholder="请输入用户名">
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-3 control-label">*密码：</label>
                <div class="col-lg-3">
                    <input type="password" id="password" name="password" class="form-control" placeholder="请输入密码">
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-3 control-label">*确认密码：</label>
                <div class="col-lg-3">
                    <input type="password" id="confirmPassword" name="confirmPassword" class="form-control" placeholder="请输入确认密码">
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-3 control-label">*单位名称：</label>
                <div class="col-lg-3">
                    <input id="companyName" name="companyName" type="text" value="" placeholder="请输入单位名称" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-3 control-label">*邮箱：</label>
                <div class="col-lg-3">
                    <input id="email" name="email" type="text" value="" placeholder="请输入真实邮箱" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-3 control-label">*联系人：</label>
                <div class="col-lg-3">
                    <input id="linkPeople" name="linkPeople" type="text" value="" placeholder="请输入联系人姓名" class="form-control">
                </div>
            </div>
            <!-- <div class="form-group">
                <label class="col-lg-3 control-label">联系人手机：</label>
                <div class="col-lg-3">
                    <input id="tel" name="tel" type="number" value=" " placeholder="请输入联系人手机" class="form-control">
                </div>
            </div> -->
            <div class="form-group">
                <label class="col-lg-3 control-label">*联系人手机：</label>
                <div class="col-lg-3">
                    <input id="cellPhone" name="cellPhone" type="number" value=" " placeholder="请输入联系人手机" class="form-control">
                </div>
            </div>
            <!-- <div class="form-group">
                <label class="col-lg-3 control-label">*验证码：</label>
                <div class="col-lg-3">
                    <input id="verify_code" name="verify_code" type="number" placeholder="请输入验证码" value=" " class="form-control">
                </div>
            </div> -->
            <div>
                <br/>
                <button class="btn btn-sm btn-primary ladda-button" data-style="zoom-in" id="btn_add_route" type="submit">立即注册</button>
            </div>
        </form>
    </div>
    <!-- Mainly scripts -->
    <script src="js/jquery-3.1.1.min.js"></script>
    <!-- <script src="js/bootstrap.min.js"></script> -->

    <!-- Sweet alert -->
    <script src="js/plugins/sweetalert/sweetalert.min.js"></script>

    <script src="js/plugins/jquery-mockjax/jquery.mockjax.min.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/main.js?v1.0"></script>
    <script src="./service.mock.js"></script>

    <!-- Ladda -->
    <script src="js/plugins/ladda/spin.min.js"></script>
    <script src="js/plugins/ladda/ladda.min.js"></script>
    <script src="js/plugins/ladda/ladda.jquery.min.js"></script>
    <!-- Jquery Validate -->
    <script src="js/plugins/validate/jquery.validate.min.js"></script>

    <script>
        $(document).ready(function () {
            //校验操作
            validate();
        });
        //校验
        function validate() {
            $("#role_form_register").validate({
                rules: {
                    userName: {
                        required: true,
                        maxlength: 20,
                        minlength: 5,
                        checkRepeat:true,
                        checkUser:true
                    },
                    password: {
                        required: true,
                        maxlength: 20,
                        minlength: 6
                    },
                    confirmPassword: {
                        required: true,
                        equalTo: "#password",
                        maxlength: 20,
                        minlength: 6
                    },
                    companyName: {
                        required: true,
                    },
                    email: {
                        required: true,
                        email: true,
                    },
                    linkPeople: {
                        required: true,
                    },
                    cellPhone: {
                        required: true,
                        digits: true,
                        maxlength: 13,
                        minlength: 11
                    }
                },
                messages: {
                    userName: {
                        required: "用户名不能为空",
                        maxlength: "用户名最大值不能大于20个字符",
                        minlength: "用户名长度太短"
                    },
                    password: {
                        required: "密码不能为空",
                        maxlength: "密码最大值不能大于20个字符",
                        minlength: "密码长度太短"
                    },
                    confirmPassword: {
                        required: "确认密码不能为空",
                        maxlength: "密码最大值不能大于20个字符",
                        minlength: "密码长度太短",
                        equalTo: "两次密码输入不一致"
                    },
                    companyName: {
                        required: "单位名称不能为空",
                    },
                    email: {
                        required: "邮箱不能为空",
                        email: "邮箱格式不正确",
                    },
                    linkPeople: {
                        required: "联系人不能为空",
                    },
                    cellPhone: {
                        required: "手机号不能为空",
                        maxlength: "手机号格式不正确",
                        minlength: "手机号格式不正确",
                    }
                },
                submitHandler: function (form) {
                    register();
                },
                invalidHandler: function (form, validator) {
                    return false;
                }
            });
        }

        //注册操作
        function register() {
            var userName = $("#userName").val();
            var password = $("#password").val();
            var companyName = $("#companyName").val();
            var email = $("#email").val();
            var linkPeople = $("#linkPeople").val();
            var cellPhone = $("#cellPhone").val();
            var user = getUserJson(userName,password,companyName,email,linkPeople,cellPhone);
            $.getJSON({
                url: bathpath + '/user/regist',
                type: 'post',
                data:user,
                contentType: "application/json;charset=utf-8", //记住加上charset=utf-8，否则Ajax请求有可能会报SCRIPT7002错误
            }).done(function (data) {
                    if (ajaxdatacheck(data)) {
                        if (data.code == 1) {
                            swal({
                                title: '注册成功',
                                text: data.content.user.userName + data.content.user.companyName,
                                type: "warning"
                            }, function () {
                                $.cookie('user', JSON.stringify(data.content.user), {
                                    expires: 8 / 24
                                })
                                window.setTimeout("window.location.href = 'login.html?_" + new Date().getTime() + "'", 200)
                            })

                        } else {
                            swal({
                                title: '出错了',
                                text: data.errorMsg || data.msg,
                                type: "warning"
                            })
                        }
                    }
                })
                .fail(function (e) {
                    console.error(e.statusText)
                })
                .always(function () {
                    if (instance)
                        instance.stop();
                })
        }
        //自定义校验用户名是否已被注册
        jQuery.validator.addMethod("checkRepeat",function(value,element){  
            var flag = true;     
            if(value !=''&&value.length>6){
                flag = checkRepeat(value);
            };
            return flag;     
        } ,  "此用户名已被注册"); 

        //自定义用户名校验规则
        jQuery.validator.addMethod("checkUser",function(value,element){  
            var flag = true; 
            var rule = /^[a-zA-Z][a-zA-Z0-9]{4,19}$/;    
            if(value !=''){
                flag = rule.test(value);
            };
            return flag;     
        } ,  "用户名长度必须在5到20之间,需以字母开头"); 

       //ajax请求后台用户名是否存在
       function checkRepeat(userName){
           var notExist = true;
        $.getJSON({
                async: false,//需用返回值，此处设为同步
                url: bathpath + '/user/checkRepeat',
                type: 'get',
                data:{"userName": userName},
                contentType: "application/json;charset=utf-8",
            }).done(function (data) {
                  if(!data.content.valid){//用户已存在
                    notExist = false;
                  }
                })
                .fail(function (e) {
                    console.error(e.statusText)
                })
         return notExist;
       }
       
         //封装user
        function getUserJson(userName,password,companyName,email,linkPeople,cellPhone){
             var user = {
                "userName":userName,
                "password":password,
                "companyName":companyName,
                "email":email,
                "linkPeople":linkPeople,
                "cellPhone":cellPhone
             };
             return JSON.stringify(user);
        }
    </script>
</body>

</html>